<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 150px;
            height: 150px;
            background: powderblue;
            padding: 150px;
        }
        #box2{
            width: 150px;
            height: 150px;
            background: palegoldenrod;
        }
    </style>
</head>
<body style="height: 1000px;">
    <div id="box1">
        <div id="box2">
        </div>
    </div>
    <script>
        document.onmousedown = function(e){
            e=e || window.event
            console.log(e.buttons) 
            // console.log(e.offsetX,e.offsetY) //到离自己最近容器的距离
            // console.log(e.pageX,e.pageY) // 到浏览器可视窗口的距离--包含隐藏距离(滚动条)
            // console.log(e.clientX,e.clientY) //到浏览器可视窗口的距离--不包含滚动条
            // console.log(e.screenX,e.screenY) //到浏览器的窗口距离--包含导航栏
        }
    </script>
</body>
</html>